import React, { useEffect, useState } from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import "./index.scss";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import axios from "src/api/index";
import md5 from "js-md5";
import { historyShape, storeShape } from "src/propType";

function Login(props) {
    const [visible, setVisible] = useState(false);

    const onFinish = values => {
        // const { userId, password } = values;
        const userId = values.userId?.trim();
        const password = values.password?.trim();
        if (!userId || (!password && password === "")) return;
        const userMsg = {
            userId,
            password: password.length === 32 ? password : md5(password),
        };
        Toast.show({
            icon: "loading",
            content: "登录中…",
        });

        props.store.user.login(userMsg).then(res => {
            if (res.code === 200) {
                props.history.replace("/home");
                Toast.show({
                    icon: "success",
                    content: res.msg,
                });
            } else {
                Toast.show({
                    icon: "fail",
                    content: res.msg,
                });
            }
        });

        // window.apiLogin(userId, password);

        // axios({
        //     method: "POST",
        //     customError: true,
        //     _ingore: true,
        //     url: "/api/v1.0/login",
        //     data: userMsg,
        //     baseURL: `${window.location.origin}`,
        // })
        //     .then(
        //         res => {
        //             if (res.msg === "success") {
        //                 document.cookie = `CRBIMSSOJWT=${res.jwt}`;
        //                 props.store.user.TKYlogin().then(res => {
        //                     if (res.code === 200) {
        //                         props.history.replace("/home");
        //                         Toast.show({
        //                             icon: "success",
        //                             content: res.msg,
        //                         });
        //                     }
        //                 });
        //             }
        //         },
        //         err => {
        //             Toast.show({
        //                 icon: "fail",
        //                 content: err.msg,
        //             });
        //         },
        //     )
        //     .catch(err => {
        //         console.log(err);
        //     });
    };

    useEffect(() => {
        //keyId 登录
        // autoLogin();

        //app应用 登录回调
        window.onSuccess = succcessCallBack;
        window.onError = errorCabllBack;
    }, []);

    const succcessCallBack = response => {
        if (response) {
            document.cookie = `CRBIMSSOJWT=${response}`;
            autoLogin();
        }
    };

    const errorCabllBack = () => {
        Toast.show({
            icon: "fail",
            content: "登录失败!",
        });
    };

    const autoLogin = () => {
        // Toast.show({
        //     icon: "loading",
        //     content: "登录中…",
        //     duration: 0
        // });
        props.store.user.TKYlogin().then(res => {
            if (res.code === 200) {
                props.history.replace("/home");
            }
            Toast.show({
                icon: "fail",
                content: res.msg,
            });
        });
    };

    return (
        <div className="login-page">
            <h2 className="title">工程报审</h2>
            <Form
                layout="horizontal"
                onFinish={onFinish}
                footer={
                    <Button block type="submit" color="primary" size="large">
                        登录
                    </Button>
                }
            >
                <Form.Item label="用户名" name="userId">
                    <Input placeholder="请输入用户名" clearable />
                </Form.Item>
                <Form.Item
                    label="密码"
                    name="password"
                    extra={
                        <div className="eye">
                            {!visible ? (
                                <EyeInvisibleOutline onClick={() => setVisible(true)} />
                            ) : (
                                <EyeOutline onClick={() => setVisible(false)} />
                            )}
                        </div>
                    }
                >
                    <Input
                        placeholder="请输入密码"
                        clearable
                        type={visible ? "text" : "password"}
                    />
                </Form.Item>
            </Form>
        </div>
    );
}

Login.propTypes = {
    store: storeShape,
    history: historyShape,
};

export default Login;
